<template>
  <div>
    <div style="width: 1265px; height: 50px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
      <span style="margin-left: 10px;">商业区编号：</span>
      <el-input placeholder="请输入" class="downtownNumClass" v-model="inputDownTownNum"></el-input>
      <span style="margin-left: 50px;">商业区名：</span>
      <el-input placeholder="请输入" class="downtownNameClass" v-model="inputDownTownName"></el-input>
      <el-button type="primary" class="searchClass" icon="el-icon-search" @click="search">查询</el-button>
      <el-button id="resetId" icon="el-icon-refresh-right" @click="reset">重置</el-button>
    </div>
    <div class="tableClass" style=" width: 1265px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
        <div class="addButtonClass" style="width: 1265px; height: 20px;">
        <el-button type="primary" id="addId" icon="el-icon-plus" @click="addDownTown">新增</el-button>
        <el-button icon="el-icon-refresh" circle id="refreshId" @click="refresh"></el-button>
        </div>
    <br/>
    <div class="table-div" style="width: 1265px;">
      <el-table
        :data="tableData"
        stripe
        :border="true"
        style="width: 100%"
        :header-cell-style="{
          background: '#1890ff',
          color: '#ffffff',
          border: '1px #ffffff solid',
          'text-align': 'center',
        }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column label="序号" type="index" :index="(this.pageNum-1)*this.pageSize+1"></el-table-column>
        <el-table-column prop="code" label="商业区编号"> </el-table-column>
        <el-table-column prop="name" label="商业区名"></el-table-column>
        <el-table-column prop="address" label="商业区地址"></el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="primary" class="el-icon-edit" plain size="small" @click="updateDownTown(scope.row)">编辑</el-button>
                <el-button type="danger" class="el-icon-delete" plain size="small"  @click="deleteDownTown($event,scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div style="height: 50px;"></div>
      <!-- 页脚 -->
      <!-- 
        1.@size-change事件监听,当分页(每页显示条数)发生变化时触发的事件
        2.@current-change事件监听,当前页数发生变化时出发的事件
        3.current-page当前页:从后端服务器中去获取
        4.page-sizes:设置可供用户选择的分页(每页显示条数)大小选项
        5.page-size:将当前的分页大小绑定到名为 pageSize 的变量上。不绑定的话默认是10条数据,这个变量决定每页显示的数据条数
        7.pager数据需要多少页去展示,自动根据total/pageSize
        
       -->
       <div class="pageHepler">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            >
            </el-pagination>
        </div>

    </div><!---表单的div-->
    <div>
        <el-dialog title="新增商业区" :visible.sync="dialogFormVisible">
            <template slot="title">
                <div style="font-size:25px;color:black;font-weight: bold;">{{updateDownTownTitle}}</div>
            </template>
            <el-form :model="form">
                <!-- show-word-limit:显示字数限制 resize:none 取消滑动条 type="textarea"：自己调整输入框的宽度-->
                <el-form-item label="商业区编号" required>    
                    <el-input v-model="form.code" style="width:400px;" placeholder="请输入" :maxlength=17 show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="商业区名称 " required>    
                    <el-input v-model="form.name" style="width:400px;" placeholder="请输入" :maxlength=17 show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="商业区地址" required>    
                    <el-input v-model="form.address" style="width:400px;" type="textarea" resize="none" placeholder="请输入" :maxlength=200 show-word-limit :rows="3"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <label slot="label">&nbsp;&nbsp;备&nbsp;注&nbsp;</label>
                    <el-input v-model="form.remark" style="width:400px;" type="textarea" resize="none" placeholder="请输入" :maxlength=200 show-word-limit :rows="3"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="margin-right: 50px;">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    
  </div>
    </div>
   
</template>

<script>
export default {
    data() {
        return {
            operateFlag:1,//1代表添加2代表修改
            updateDownTownTitle:"新增商业区",
            dialogFormVisible:false,
            tableData:"",
            pageNum:"",
            pageSize:"",
            total:"",
            inputDownTownNum:"",//输入商业区编号
            inputDownTownName:"",//输入商业区名称
            form:{
                id:"",
                code:"",
                name:"",
                address:"",
                remark:""//备注
            }
        }
    },
    methods: {
        //查询和搜索商业街
        selectHouseBlock(pageNum,pageSize,inputDownTownNum,inputDownTownName){
            this.$http.get(
                "http://localhost:8080/houseBlock/selectHouseBlock",
                {
                    params:{
                        pageNum:pageNum,
                        pageSize:pageSize,
                        downTownNum:inputDownTownNum,
                        downTownName:inputDownTownName
                    }
                }
                
            ).then((result) => {
                var $data=result.data;
                this.tableData=$data.data.list;
                console.log(this.tableData)
                this.total = $data.data.total;
                this.pageNum=$data.data.pageNum;
                this.pageSize=$data.data.pageSize;
                
            }).catch((err) => {
            });
        },
        //删除商业街
        deleteDownTown(event,row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$http.post(
                "http://localhost:8080/houseBlock/deleteHouseBlockById",
                {
                   id:row.id
                }
            ).then((result) => {
                // alert("删除成功")
                this.selectHouseBlock(this.pageNum,this.pageSize,this.inputDownTownNum,this.inputDownTownName);
                //使el-button失去焦点
                event.target.blur();
                if(event.target.nodeName == "SPAN") {
                    event.target.parentNode.blur();
                }
            }).catch((err) => {
                
            });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
          //使el-button失去焦点
          event.target.blur();
          if(event.target.nodeName == "SPAN") {
                event.target.parentNode.blur();
           }       
        });
    },
        //新增商业街按钮
        addDownTown(){
            this.operateFlag=1;
            this.dialogFormVisible=true;
            this.updateDownTownTitle="新增商业街";
            this.form.code="";
            this.form.name="";
            this.form.address="";
            this.form.remark="";
        },
        //编辑商业街按钮
        updateDownTown(row){
            this.operateFlag=2;
            this.dialogFormVisible=true;
            this.updateDownTownTitle="修改商业街"
            this.form.id=row.id;
            this.form.code=row.code;
            this.form.name=row.name;
            this.form.address=row.address;
            this.form.remark=row.remark;
        },
        //提交添加/修改
        submitForm(){            
            this.dialogFormVisible=false;
            if(this.operateFlag==1){
                this.$http.post(
                    "http://localhost:8080/houseBlock/updateHouseBlock",
                    {
                        code:this.form.code,
                        name:this.form.name,
                        address:this.form.address,
                        remark:this.form.remark,
                        enabledMark:this.operateFlag
                    }
                ).then((result) => {
                    this.selectHouseBlock(this.pageNum,this.pageSize,this.inputDownTownNum,this.inputDownTownName)
                }).catch((err) => {
                    
                });
            }
            if(this.operateFlag==2){
                this.$http.post(
                    "http://localhost:8080/houseBlock/updateHouseBlock",
                    {
                        id:this.form.id,
                        code:this.form.code,
                        name:this.form.name,
                        address:this.form.address,
                        remark:this.form.remark,
                        enabledMark:this.operateFlag
                    }
                ).then((result) => {
                    this.selectHouseBlock(this.pageNum,this.pageSize,this.inputDownTownNum,this.inputDownTownName)
                }).catch((err) => {
                });
            }
            

        },
        //当前页按钮
        handleCurrentChange(val){
            this.selectHouseBlock(val,this.pageSize,this.inputDownTownNum,this.inputDownTownName)
        },
        //分页按钮
        handleSizeChange(val){
            this.selectHouseBlock(this.pageNum,val,this.inputDownTownNum,this.inputDownTownName)
        },
        //查询按钮
        search(){
            this.pageNum=1;
            this.selectHouseBlock(this.pageNum,this.pageSize,this.inputDownTownNum,this.inputDownTownName)
        },
        //重置按钮(将编号和名称清空的同时再重新获取数据)
        reset(){
            this.pageNum="";
            this.pageSize="";
            this.inputDownTownNum="";
            this.inputDownTownName="";
            this.selectHouseBlock(this.pageNum,this.pageSize,this.inputDownTownNum,this.inputDownTownName)
        },
       //刷新按钮,重新加载一遍数据即可
       refresh(){
        this.selectHouseBlock(this.pageNum,this.pageSize,this.inputDownTownNum,this.inputDownTownName)
       }
    },
    
    beforeMount() {
       this.selectHouseBlock(this.pageNum,this.pageSize,"","");
    },
   
}
</script>

<style>
    .downtownNumClass{
        width: 300px;
    }
    .downtownNameClass{
        width: 300px;
    }
    .searchClass{
        margin-left: 50px;
    }
    .addButtonClass{
        margin-top: 20px;
    }
    #resetId{
        margin-left: 30px;
    }
    .table-div{
        margin-top: 10px;
    }
    .tableClass{
        position: relative;
    }
    .pageHepler{
        position: absolute;
        bottom: 0;
        right: 0;
    }
    #addId{
        margin-top: 5px;
    }
    #refreshId{
        float: right;
        margin-top: 5px;
        margin-right: 8px;
    }
    /* 自定义样式以设置 label 字体加粗 */
    .el-form-item__label {
        margin-left: 100px;
        font-weight: bold;
        font-size: 20px; 
    }
    .custom-dialog .el-dialog__header {
        font-size: 40px; /* 设置标题字体大小 */
    }
</style>